<template>
	<view class="Livestock" v-if="list">
		<view class="Livestock-input">
			<view class="Livestock-input-icon">
				<i class="iconfont icon-sousuo" style="font-size: 40rpx;"></i>
			</view>
			<input type="text" placeholder="输入牲畜名称或IMEI查询" />
		</view>
		<view class="Livestock-list" v-for="(item,index) in list" :key="index">
			<view class="Livestock-list-lefe">
				<image src="@/static/imgs/cow.png" alt="" style="width: 70rpx;height: 70rpx;" />
				<view class="Livestock-list-lefe-item">
					<view>牲畜编号</view>
					<view style="color: #999999;">IMEI：{{item.F_IMEI}}</view>
				</view>
			</view>
			<navigator :url="`/pages/livestock/Abnormal?fId=${item.F_Id}`">
				<view class="Livestock-list-right">
					<i class="iconfont icon-xiangyoujiantou" style="font-size: 40rpx;"></i>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script setup>
import {ref,onMounted} from 'vue';
import {cattleList} from '@/utils/api/Livestock.js'
const list = ref([])


onMounted( async ()=>{
	let res = await cattleList()
	list.value=res.data
})

</script>

<style scoped>
	@import '@/static/iconfont/iconfont.css';

	.Livestock {
		width: 100%;
		min-height: 100vh;
		background-color: #F3F5F8;
	}

	.Livestock-input {
		width: 90%;
		height: 70rpx;
		margin: 0 auto;
		display: flex;
		padding-top: 40rpx;
	}

	.Livestock-input input {
		flex: 1;
		height: 70rpx;
		background-color: #fff;
		border-radius: 0rpx 20rpx 20rpx 0rpx;
	}

	.Livestock-input-icon {
		width: 70rpx;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
		background-color: #fff;
		border-radius: 20rpx 0rpx 0rpx 20rpx;
	}
	
	.Livestock-list{
		width: 90%;
		height: 120rpx;
		margin: 40rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		border-radius: 20rpx;
	}
	
	.Livestock-list-lefe{
		margin-left: 40rpx;
		display: flex;
		align-items: center;
	}
	
	.Livestock-list-lefe-item{
		height: 100rpx;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		font-size: 25rpx;
	}
	
	.Livestock-list-right{
		margin-right: 40rpx;
	}
</style>